<template>
  <view class="im-wrapper theme-default">
    <!-- 录音浮层 -->
    <RecordingLayer :audioInfo="audioInfo"></RecordingLayer>
    <!-- 聊天对话框 -->
    <view class="im-container">
      <!-- 消息列表 -->
      <view class="im-msg-list" @click="handleMsgListClick">
        <msg-list
          v-if="imStatus"
          ref="msgList"
          :theme="theme"
          :imId="imId"
          :toUser="toUser"
          :emoji="emoji"
          :emojiObj="emojiObj"
          :msgRender="msgRender"
          @onMsgDataInit="onMsgDataInit"
        />
      </view>
      <!-- 输入框 -->
      <view class="im-input-bar">
        <msg-input-bar
          ref="msgInputBar"
          :imId="imId"
          :toUser="toUser"
          :chooseList="chooseList"
          :emoji="emoji"
          :emojiObj="emojiObj"
          :showEmoji="showEmoji"
          :showAudio="showAudio"
          @inputBarHeightChange="handleInputBarHeightChange"
          @audioInfoUpdate="handleAudioInfoUpdate"
        />
      </view>
    </view>
    <!-- loading状态 -->
    <view v-if="!imStatus || loading" class="im-loading">
      <text class="im-icon-loading imani-spin"></text>
    </view>
  </view>
</template>
<script>
import MsgList from './msgList';
import MsgInputBar from './msgInputBar';
import RecordingLayer from './media/audio/recording';

export default {
  name: 'pgDialogBox',

  components: {
    MsgList,
    MsgInputBar,
    RecordingLayer
  },

  props: {
    // 主题
    theme: {
      type: String,
      default: 'default'
    },
    // 连接标识
    imId: {
      type: String,
      default: '',
      required: true
    },
    // 接收者
    toUser: {
      type: String,
      default: '',
      required: true
    },
    // 下拉面板
    chooseList: {
      type: Array,
      default: () => []
    },
    // 消息渲染函数
    msgRender: {
      type: Function,
      default: function () {}
    },
    // 是否启用表情
    showEmoji: {
      type: Boolean,
      default: true
    },
    // 是否启用语音
    showAudio: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      // 录音
      audioInfo: {},

      // loading状态
      loading: true,

      // 表情地址
      emoji: {
        path: '../static/chat/faces/',
        map: {
          '[):]': require('./static/chat/faces/ee_1.png'),
          '[:D]': require('./static/chat/faces/ee_2.png'),
          '[;)]': require('./static/chat/faces/ee_3.png'),
          '[:-o]': require('./static/chat/faces/ee_4.png'),
          '[:p]': require('./static/chat/faces/ee_5.png'),
          '[(H)]': require('./static/chat/faces/ee_6.png'),
          '[:@]': require('./static/chat/faces/ee_7.png'),
          '[:s]': require('./static/chat/faces/ee_8.png'),
          '[:$]': require('./static/chat/faces/ee_9.png'),
          '[:(]': require('./static/chat/faces/ee_10.png'),
          "[:'(]": require('./static/chat/faces/ee_11.png'),
          '[<o)]': require('./static/chat/faces/ee_12.png'),
          '[(a)]': require('./static/chat/faces/ee_13.png'),
          '[8o|]': require('./static/chat/faces/ee_14.png'),
          '[8-|]': require('./static/chat/faces/ee_15.png'),
          '[+o(]': require('./static/chat/faces/ee_16.png'),
          '[|-)]': require('./static/chat/faces/ee_17.png'),
          '[:|]': require('./static/chat/faces/ee_18.png'),
          '[*-)]': require('./static/chat/faces/ee_19.png'),
          '[:-#]': require('./static/chat/faces/ee_20.png'),
          '[del]': require('./static/chat/faces/del.png'),
          '[^o)]': require('./static/chat/faces/ee_21.png'),
          '[:-*]': require('./static/chat/faces/ee_22.png'),
          '[8-)]': require('./static/chat/faces/ee_23.png'),
          '[(|)]': require('./static/chat/faces/ee_24.png'),
          '[(u)]': require('./static/chat/faces/ee_25.png'),
          '[(S)]': require('./static/chat/faces/ee_26.png'),
          '[(*)]': require('./static/chat/faces/ee_27.png'),
          '[(#)]': require('./static/chat/faces/ee_28.png'),
          '[(R)]': require('./static/chat/faces/ee_29.png'),
          '[({)]': require('./static/chat/faces/ee_30.png'),
          '[(})]': require('./static/chat/faces/ee_31.png'),
          '[(k)]': require('./static/chat/faces/ee_32.png'),
          '[(F)]': require('./static/chat/faces/ee_33.png'),
          '[(W)]': require('./static/chat/faces/ee_34.png'),
          '[(D)]': require('./static/chat/faces/ee_35.png')
        }
      },

      // 相对 emoji.js 路径
      emojiObj: {
        path: './static/chat/faces/',
        map1: {
          '[):]': require('./static/chat/faces/ee_1.png'),
          '[:D]': require('./static/chat/faces/ee_2.png'),
          '[;)]': require('./static/chat/faces/ee_3.png'),
          '[:-o]': require('./static/chat/faces/ee_4.png'),
          '[:p]': require('./static/chat/faces/ee_5.png'),
          '[(H)]': require('./static/chat/faces/ee_6.png'),
          '[:@]': require('./static/chat/faces/ee_7.png')
        },
        map2: {
          '[:s]': require('./static/chat/faces/ee_8.png'),
          '[:$]': require('./static/chat/faces/ee_9.png'),
          '[:(]': require('./static/chat/faces/ee_10.png'),
          "[:'(]": require('./static/chat/faces/ee_11.png'),
          '[<o)]': require('./static/chat/faces/ee_12.png'),
          '[(a)]': require('./static/chat/faces/ee_13.png'),
          '[8o|]': require('./static/chat/faces/ee_14.png')
        },
        map3: {
          '[8-|]': require('./static/chat/faces/ee_15.png'),
          '[+o(]': require('./static/chat/faces/ee_16.png'),
          '[|-)]': require('./static/chat/faces/ee_17.png'),
          '[:|]': require('./static/chat/faces/ee_18.png'),
          '[*-)]': require('./static/chat/faces/ee_19.png'),
          '[:-#]': require('./static/chat/faces/ee_20.png'),
          '[del]': require('./static/chat/faces/del.png')
        },
        map4: {
          '[^o)]': require('./static/chat/faces/ee_21.png'),
          '[:-*]': require('./static/chat/faces/ee_22.png'),
          '[8-)]': require('./static/chat/faces/ee_23.png'),
          '[(|)]': require('./static/chat/faces/ee_24.png'),
          '[(u)]': require('./static/chat/faces/ee_25.png'),
          '[(S)]': require('./static/chat/faces/ee_26.png'),
          '[(*)]': require('./static/chat/faces/ee_27.png')
        },
        map5: {
          '[(#)]': require('./static/chat/faces/ee_28.png'),
          '[(R)]': require('./static/chat/faces/ee_29.png'),
          '[({)]': require('./static/chat/faces/ee_30.png'),
          '[(})]': require('./static/chat/faces/ee_31.png'),
          '[(k)]': require('./static/chat/faces/ee_32.png'),
          '[(F)]': require('./static/chat/faces/ee_33.png'),
          '[(W)]': require('./static/chat/faces/ee_34.png'),
          '[(D)]': require('./static/chat/faces/ee_35.png')
        },
        map6: {
          '[del]': 'del.png'
        }
      },

      imStatus: false
    };
  },

  mounted() {
    if (this.$hxim.get(this.imId).status) {
      this.imStatus = true;
    } else {
      this.$hxim.get(this.imId).$on('loginSuccess', () => {
        this.imStatus = true;
      });
    }
  },

  methods: {
    // 消息列表点击
    handleMsgListClick() {
      this.$refs.msgInputBar.setIsShowSwiper(false);
    },

    // InputBar高度变化
    handleInputBarHeightChange() {
      this.$refs.msgList.scrollToBottom();
    },

    // 处理录音模式时
    handleAudioInfoUpdate(audioInfo) {
      this.audioInfo = audioInfo;
    },

    // 列表数据初始化完成时
    onMsgDataInit() {
      this.loading = false;
    }
  }
};
</script>

<style lang="scss" scoped>
@import './common/index';
.im-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #efefef;
  height: 100%;
  overflow: hidden;
}
.im-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.im-msg-list {
  position: relative;
  flex: 1;
  overflow: hidden;
}
.im-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #efefef;
  z-index: 9999;

  .im-icon-loading {
    font-size: 44rpx;
  }
}
</style>
